<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>SubEthaEdit Syntax Scope Style Guide</title>
    <style type="text/css">
    body {
    background: #999;
    font: 14px "Helvetica Neue",Helvetica,"Arial Unicode MS",Arial,sans-serif;
    color: #000;
    margin: 0 10px;
    padding: 0;
    line-height: 1.4;
    text-align: center;
    text-rendering: optimizeLegibility
    }
    div#content {
      background: #ddd;
      min-width:500px;
      max-width:900px;
      text-align:left;
      padding: 5px 10px;
      margin: 10px auto;
      -webkit-border-radius: 12px;
      -webkit-box-shadow: inset 0px 0px 4px #000;
    }
    h1 {
    text-align:center;
    }
    h2,h3,h4,h5,h6 {
      padding:0;
      margin:6px 0px 2px 0px;
      font-weight: normal;
    }
    tt, p.code, code {
      font-family: Consolas, Monaco, "Lucida Console", monospace;
    }
    p {
      margin:0; 
      padding:0;
      margin-top: 4px;
    }
    div.syntax_scope_name {
      border-bottom: 1px solid #aaa;
      margin-bottom: 8px;
    }
    div.syntax_scope_name > tt {
      font-weight: bold;
      display:block;
    }
    div.syntax_scope {
      margin: 4px 0px;
      padding: 7px 6px;
      background: #fff;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      -webkit-box-shadow: inset 0px 1px 2px #666;
    }
    div#content > p , div.syntax_scope_area, div.syntax_scope_area > p {
      margin: 4px 4px 0px 12px;
    }
    div.examples {
      float:right;
      text-align:right;
      background:#fff;
      margin:0px;
      padding:4px 10px;
    }
    div.examples > tt {
      display:block;
    }
  </style>
  </head>
  <body>
    <h1>SubEthaEdit Syntax Scope Style Guide</h1>
    <div id="content">
    <h2>Overview</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend ipsum ac tortor condimentum posuere. Donec in rhoncus metus. Nullam mollis mollis ante vel pharetra. Duis quis ipsum velit. Fusce commodo consectetur felis, vitae sagittis orci convallis id. Quisque suscipit faucibus justo ut egestas. Maecenas sed lorem elit, nec faucibus velit.</p><p>Ut convallis, risus in gravida eleifend, urna sapien ultricies tellus, eget congue dui ante vitae est. Maecenas luctus tincidunt eros, vel aliquet dui semper sed. In hendrerit facilisis ipsum, eget bibendum purus blandit at. Suspendisse eu urna ut mauris pretium accumsan eu id urna. Maecenas a dolor hendrerit turpis posuere fermentum id eget enim. Donec justo sapien, dictum at consectetur a, posuere sed diam. Nullam a cursus est. Nullam risus orci, commodo id interdum malesuada, dapibus eu metus.</p>
    <h2>Scope Areas</h2>
    <div class="syntax_scope_area">
      <h3>General</h3>
      <p>Scopes that may affect all sorts of texts</p>
      <div class="syntax_scope">
        <div class="syntax_scope_name"><tt>meta.default</tt></div>
        <p class="syntax_scope_description">Default fallback scope. All scopes fallback on the defaults of this scope. The <tt>meta.default</tt> scope of the top-level Language Context also defines the base background and foreground color of the document.</p>
      </div>
      <div class="syntax_scope">
        <div class="syntax_scope_name"><tt>meta.highlight.currentline</tt></div>
        <p class="syntax_scope_description">Meta scope that defines how the current line is highlighted.</p>
      </div>
      <div class="syntax_scope">
        <div class="syntax_scope_name">
          <div class="examples">
            <tt>http://apple.com</tt>
            <tt>sjobs@me.com</tt>
          </div>
          <tt>meta.link</tt>
          <tt>meta.link.email</tt>
        </div>
        <p class="syntax_scope_description">URLs, Emails</p>
      </div>
    </div>
    <div class="syntax_scope_area">
    <h3>Programming Languages (c,js,php,ruby,…)</h3>
    <p>Scopes present in programming languages</p>
      <div class="syntax_scope">
        <div class="syntax_scope_name">
        <div class="examples">
          <tt>// c comment</tt>
          <tt># bash comment</tt>
          <tt>/* block comment */</tt>
          <tt>/** block documentation comment **/</tt>
        </div>
<tt>comment</tt>
<tt>comment.line</tt>
<tt>comment.line.double-slash</tt>
<tt>comment.block</tt>
<tt>comment.block.documentation</tt>
</div>
        <p class="syntax_scope_description">All sorts of comments</p>
      </div>

      <div class="syntax_scope">
        <div class="syntax_scope_name">
        <div class="examples">
          <tt>if return do while</tt>
          <tt>char int</tt>
        </div>
<tt>keyword</tt>
<tt>keyword.control</tt>
<tt>keyword.type</tt>
</div>
        <p class="syntax_scope_description">Language Keywords</p>
      </div>
    
    </div>
    <h3>Document Structure Langauges (xml, html,…)</h3>
    </div>
  </body>
</html>